import React, { useCallback } from 'react'
import { View, Text, Image } from '@tarojs/components'
import Images from '@ASSET/Images'
import styles from './Group.module.scss'
const Group = ({
  datas, language, onChange, style, disabled, selectData, isSingle
}) => {
  const onPressItem = useCallback(item => {
    if (disabled) return
    onChange?.(item)
  }, [disabled, onChange])
  if (!Array.isArray(datas)) return null
  return (
    <View className={`${styles.container} ${style}`}>
      {datas.map(item => {
        const { Text: text, Label } = item || {}
        const isSelect = isSingle && selectData === Label || !isSingle && selectData?.includes(Label)
        return (
          <View
            className={styles.item}
            disabled={disabled}
            onClick={() => onPressItem(item)}
            key={Label}
          >
            {isSelect && <View className={styles.lineBg} />}
            <Text className={`${styles.label} ${styles.labelWidth} ${disabled ? styles.labelDisabled : ''} ${isSelect ? styles.labelSelect : ''}`}>
              {`${Label}. `}
            </Text>
            <Text
              className={`${styles.label} ${disabled ? styles.labelDisabled : ''} ${isSelect ? styles.labelSelect : ''}`}
              style={{ flex: 1 }}
            >
              {text?.[language]}
            </Text>
            {(!disabled || isSelect) && (
            <View className={styles.selectIconView}>
              <Image src={isSelect ? Images.survey.icon_survey_select : Images.survey.icon_survey_normal} className={styles.icon} />
            </View>
            )}
          </View>
        )
      })}
    </View>
  )
}
export default Group
